<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css画图形</title>
</head>
<style>
    .circle { /* 圆形 */
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: green;
    }

    .ellipse {
        width: 150px;
        height: 100px;
        background-color: #00f;
        border-radius: 50% / 50%;
    }

    .triangle { /* 三角形 */
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-right: 100px solid #0f0;
    }

    .sector { /* 扇形 */
        width: 0;
        height: 0;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 200px solid blue;
        border-radius: 50%;
        margin: 20px;
        /* transform: rotate(45deg); 旋转45度 */
    }

    .trapezoid { /* 梯形 */
        width: 150px;
        height: 0;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 200px solid pink;
        margin: 30px;
    }

    .parallelogram {
        width: 300px;
        height: 200px;
        background-color: #ffa500;
        transform: skew(20deg);
        margin: 60px;
    }

    .diamond {
        width: 100px;
        height: 100px;
        background-color: #00ced1;
        transform: rotate(45deg);
        margin: 40px;
    }
</style>
<body>
    <div class="circle"></div>
    <div class="ellipse"></div>
    <div class="triangle"></div>
    <div class="sector"></div>
    <div class="trapezoid"></div>
    <div class="parallelogram"></div>
    <div class="diamond"></div>
</body>
</html>